/*
 * @Author: xiaosihan 
 * @Date: 2024-07-18 23:29:08 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-07-19 00:21:55
 */

import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./fileLists.module.less";
import modal2ThumbPNG from "./modal2Thumb.png";
import { CloseOutlined } from "@ant-design/icons";
import FQRSStore from "../../FQRSStore";
import { Button } from "antd";

interface Iprops {
    children?: ReactNode
}

// 文件列表
export default function FileLists(props: Iprops) {

    const dom = useRef<HTMLDivElement | null>(null);

    const [activeFileId, setActiveFileId] = useState(FQRSStore.activeFileId);

    useEffect(() => {

    }, []);

    useEffect(() => autorun(() => {
        setActiveFileId(FQRSStore.activeFileId);
    }), []);

    return (
        <div className={styles.fileLists} >
            <div className={styles.file_name} onClick={() => FQRSStore.setActiveFileId("1")} >
                <span className={styles.suffix} >OBJ</span>
                <span className={styles.file_name} >1.文件名</span>
                <CloseOutlined className={styles.close} />
            </div>
            {
                activeFileId === "1" &&
                <img className={styles.img} src={modal2ThumbPNG} alt="" />
            }
            <div className={styles.file_name} onClick={() => FQRSStore.setActiveFileId("2")}>
                <span className={styles.suffix} >3DS</span>
                <span className={styles.file_name} >2.文件名</span>
                <CloseOutlined className={styles.close} />
            </div>
            {
                activeFileId === "2" &&
                <img className={styles.img} src={modal2ThumbPNG} alt="" />
            }
            <div className={styles.file_name} onClick={() => FQRSStore.setActiveFileId("3")}>
                <span className={styles.suffix} >3DS</span>
                <span className={styles.file_name} >3.文件名</span>
                <CloseOutlined className={styles.close} />
            </div>
            {
                activeFileId === "3" &&
                <img className={styles.img} src={modal2ThumbPNG} alt="" />
            }
            <div className={styles.btn} >
                <Button size="small" type="primary" >增加项目文件</Button>
            </div>
        </div>
    );

}